<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr />
    <div>
      <p>
        微信公众二维码
        <el-button type="primary">按钮</el-button>
      </p>
      <iframe v-if="qrCodeUrl" :src="qrCodeUrl" class="iframe-box"></iframe>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      myId: "",
      ticket: "",
      qrCodeUrl: "",
    };
  },
  methods: {
    // 轮询问服务器，看看关注了没
    async loopGet() {
      try {
        let rel = await this.answerServer();
        console.log('是否关注',rel);
        if (rel && rel.data) {
          // 关注了
          this.$message({
            message: '关注成功',
            type: 'success'
          })
          this.$router.push('/main')
        } else {
          await this.sleep(5000)
          this.loopGet()
        }
      } catch (error) {
        throw '报错'+error
      }
    },
    sleep(delay){
      return new Promise((res,rej)=>{
        let timer=setTimeout(()=>{
          clearTimeout(timer)
          res()
        }, delay)
      })
    },
    answerServer() {
      return new Promise((res, rej) => {
        let url = "./api/isSubscribe";
        let data = {
          // ticket: this.ticket, // 方法1：ticket可以验证
          myId: sessionStorage.getItem('myId') // 方法2：myId也可以验证，只要和后台搭配即可
        };
        $.ajax({
          type: "POST",
          url,
          data,
          cache: false,
          async: false,
          dataType: "json",
          // dataType: ($.browser.msie) ? "text" : "xml",
          success: function (data) {
            res(data)
          },
          error: function (error) {
            rej(error)
          }
        });
      });
    },
    // 获取公众号二维码
    getQrCode() {
      let that = this;
      // 生成一个随机myId
      let myId = parseInt(Math.random() * 1000000)
      if(myId<1){
        myId = 555;
      }
      // 存储到会话里
      sessionStorage.setItem('myId', myId)
      console.log("开始获取--");
      let data = {
        expire_seconds: 604800,
        action_name: "QR_SCENE",
        action_info: {
          scene: { scene_id: myId },
        },
      };

      let url = "../api/getQrCode";
      $.ajax({
        type: "POST",
        url,
        data,
        cache: false,
        async: false,
        dataType: "json",
        // dataType: ($.browser.msie) ? "text" : "xml",
        success: function (data) {
          console.log("getQrCode-成功--", data);
          // 保存好票据
          that.ticket = data.ticket;
          // showQrCode(xmlobj)
          let url = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${that.ticket}`;
          // 这样前端get请求，跳转页面
          // window.location.href = url;
          that.qrCodeUrl = url;
        },
      });
    },
    initData(callback) {
      return new Promise((resolve, reject) => {
        // 获取最新的token对象
        let url = "../api/wx";
        let rel;
        $.ajax({
          type: "get",
          url,
          cache: false,
          async: false,
          dataType: "json",
          // dataType: ($.browser.msie) ? "text" : "xml",
          success: function (xmlobj) {
            rel = xmlobj;
            console.log("成功--", xmlobj);
          },
        }).responseText;

        console.log("token信息对象: ", typeof rel, rel, rel.length);

        resolve();

        var localIds = "";

        // 原文链接：https://blog.csdn.net/qq_23543983/article/details/80438317

        console.log("wx", wx);
        let obj = rel;
        // const obj ={
        //   "appId":"wx3680aee5b396cc0f",
        //   "timestamp":1637402688718,
        //   "nonceStr":"5158860791725619",
        //   "signature":"c383d0d37c13fed1f5cefe2c33776025c95816bc"};
        const jsArr = [
          "openLocation",
          "updateTimelineShareData",
          "chooseImage",
          "getLocation",
          "onMenuShareQZone",
          "getNetworkType",
        ];
        wx.config({
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: obj.appId, // 必填，公众号的唯一标识
          timestamp: obj.timestamp, // 必填，生成签名的时间戳
          nonceStr: obj.nonceStr, // 必填，生成签名的随机串
          signature: obj.signature, // 必填，签名
          jsApiList: jsArr, // 必填，需要使用的JS接口列表
        });

        wx.ready(function (a, b) {
          console.log("read", a, b);
          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        });
        wx.error(function (a, b) {
          console.error("error", a, b);
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
      });
    },
  },

  async mounted() {
    // 初始化
    await this.initData();

    // 获取公众号二维码
    sessionStorage.setItem('myId', '')
    this.getQrCode();
    
    // 同时，开始轮询
    this.loopGet()

    function showQrCode(data) {
      let url = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${data.ticket}`;
      $.ajax({
        type: "Get",
        url,
        cache: false,
        async: false,
        dataType: "json",
        // dataType: ($.browser.msie) ? "text" : "xml",
        success: function (xmlobj) {
          console.log("QrCode-成功--", xmlobj);
        },
      });
    }

    function getImg() {
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          console.error("图像选择结果：", res);
          localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          // 'https://www.baidu.com/img/flexible/logo/pc/result.png'

          getLocalData(localIds[0]);
        },
      });
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.iframe-box {
  width: 435px;
  height: 435px;
  border: 2px solid red;
  margin: 10px auto;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
